1 00:00:01,390 --> 00:00:04,600 Let's take a quick look at guys in this video. 2 00:00:04,780 --> 00:00:10,480 The first one we're going to go over our screen, guys, and they are 2D objects that appear on our 3 00:00:10,480 --> 00:00:11,230 screen. 4 00:00:11,530 --> 00:00:15,340 We can create a screen UI in the starter GUI here. 5 00:00:17,410 --> 00:00:24,160 And inside the starter GI, we can place several elements such as frames, text buttons, text labels, 6 00:00:24,160 --> 00:00:28,270 image labels, text boxes, and even image buttons. 7 00:00:28,510 --> 00:00:32,470 Let's go ahead and take a look at some of the properties of the screen GI here. 8 00:00:32,890 --> 00:00:39,830 So this first one here is called Display Order, and this is basically the Z index for the UI. 9 00:00:39,850 --> 00:00:46,150 If there happens to be multiple screens UI's on the player screen, then this will tell you which order 10 00:00:46,150 --> 00:00:48,340 you would like the screens UI to render. 11 00:00:48,340 --> 00:00:53,200 So a higher number takes a higher precedence over another screens UI. 12 00:00:53,500 --> 00:00:55,420 So it will render above it. 13 00:00:56,020 --> 00:00:59,020 The next one here is called Ignore UI inset. 14 00:00:59,020 --> 00:01:00,370 And this one's pretty simple. 15 00:01:00,370 --> 00:01:04,780 If you've played a game, you notice there's this bar at the top of your screen and it holds like the 16 00:01:04,780 --> 00:01:07,990 chat button, the setting icon, stuff like that. 17 00:01:08,110 --> 00:01:14,020 This tells the guy whether or not you'd like to respect that line up there and only put the guy on the 18 00:01:14,020 --> 00:01:19,390 bottom portion of the screen or completely ignore it and cover the entire screen with the UI. 19 00:01:19,600 --> 00:01:26,200 This other one here is called Reset on Spawn, and this is just basically for when the player dies and 20 00:01:26,200 --> 00:01:28,480 then respond to a new character. 21 00:01:28,480 --> 00:01:35,920 Whether or not you'd like to delete the UI or if the guy is and started UI like here, it'll get deleted 22 00:01:35,920 --> 00:01:40,840 from the player's player UI folder and then a new copy will be placed in that folder. 23 00:01:40,870 --> 00:01:48,520 The last property is Z index behavior and this changes how the Z index is used to render UI elements. 24 00:01:48,520 --> 00:01:54,580 So when it's set to sibling, the children will always render above their parents and their Z indexes 25 00:01:54,580 --> 00:01:59,560 are used to decide how they will render over any of their other siblings if they have any. 26 00:01:59,560 --> 00:02:05,260 While global means that all the UI elements will be rendered in accordance with their Z indexes, so 27 00:02:05,260 --> 00:02:11,800 any children of a UI element will only render above their parent if their Z index is equal to or greater 28 00:02:11,800 --> 00:02:13,750 than the parents Z index. 29 00:02:15,730 --> 00:02:22,170 So to kind of show off the screen guy, let's put a simple maybe like a text label in here. 30 00:02:22,180 --> 00:02:27,580 And as you can see in the top left of our screen, it has placed this text label here, and this text 31 00:02:27,580 --> 00:02:30,520 label has a bunch of properties. 32 00:02:30,970 --> 00:02:35,860 I'm not going to go over all of them, but I will explain the most important ones that belong to all 33 00:02:35,860 --> 00:02:37,450 Jai elements. 34 00:02:37,870 --> 00:02:44,740 So this one appears active and this basically tells the game whether or not you like this text label 35 00:02:44,740 --> 00:02:46,470 to fire events on it. 36 00:02:46,480 --> 00:02:51,130 So if somebody hovers their mouse over it or clicks it or whatever, it starts firing mouse related 37 00:02:51,130 --> 00:02:51,880 events. 38 00:02:52,210 --> 00:02:53,830 The next one is anchor point. 39 00:02:53,830 --> 00:02:54,940 This one's pretty simple. 40 00:02:54,940 --> 00:02:57,400 It just sets the anchoring point by default. 41 00:02:57,400 --> 00:03:03,130 That is the top left of our UI element, but I can change it here to be something else. 42 00:03:03,130 --> 00:03:09,220 So maybe like I want the anchor point to be in the middle of our text label and as you can see, it 43 00:03:09,220 --> 00:03:17,200 shifts our label off the screen because the current position is set to 000, which is up in this corner 44 00:03:17,200 --> 00:03:17,860 up here. 45 00:03:18,310 --> 00:03:23,440 You can basically think of this as a 2D plane like here you have your x axis, here, you have your 46 00:03:23,440 --> 00:03:26,380 y axis, but it's actually positive in this direction. 47 00:03:26,380 --> 00:03:29,710 It's not negative and it's positive in this direction as well. 48 00:03:30,730 --> 00:03:32,500 Next one here is automatic size. 49 00:03:32,500 --> 00:03:39,160 And this is basically for when any children of my text label or the text itself starts going beyond 50 00:03:39,160 --> 00:03:40,300 the boundaries of it. 51 00:03:40,300 --> 00:03:42,310 Like you see this defined edge here. 52 00:03:42,310 --> 00:03:47,260 Once any children or the text goes beyond it, this determines whether or not we want to automatically 53 00:03:47,260 --> 00:03:53,770 scale the size of our text label to encompass any of those objects within the boundaries that has defined. 54 00:03:54,190 --> 00:03:59,170 So we can choose that for the x axis, the y axis, or both the x and y axis. 55 00:04:00,230 --> 00:04:04,580 So, for example, here, I'm just going to quickly move the position to the center of the screen. 56 00:04:04,580 --> 00:04:06,030 Just ignore what I'm doing for now. 57 00:04:06,030 --> 00:04:07,460 I'll explain it in a little bit. 58 00:04:09,330 --> 00:04:18,030 But if I set this automatic size to like X and then I start typing some text in here, like whatever, 59 00:04:18,300 --> 00:04:25,470 and I continue typing in a bunch of text, you see it automatically scale to fit my text in here. 60 00:04:25,470 --> 00:04:28,560 But if I turn it off and put it on none. 61 00:04:28,590 --> 00:04:35,190 You see, the text goes over the border of my text label or if I change it to Y, then it still goes 62 00:04:35,190 --> 00:04:41,160 over unless I enable text wrapped, which allows the text to wrap itself. 63 00:04:41,160 --> 00:04:45,750 And then I can keep typing and it'll keep scaling downwards as I add more and more text. 64 00:04:45,750 --> 00:04:48,780 So this property is pretty useful, but I'll just keep it on. 65 00:04:48,780 --> 00:04:49,830 None for now. 66 00:04:50,720 --> 00:04:52,210 This one is pretty simple. 67 00:04:52,220 --> 00:04:55,460 Change the color of the background to whatever color you'd like. 68 00:04:55,850 --> 00:05:00,080 You can change the transparency of the background as well, so you can have it fully transparent. 69 00:05:00,840 --> 00:05:03,690 Partially transparent or completely opaque. 70 00:05:03,900 --> 00:05:07,110 There's also a border here we can set the color of. 71 00:05:07,110 --> 00:05:12,240 So maybe you want to have a black border around this text label. 72 00:05:12,240 --> 00:05:13,650 You can see our black border. 73 00:05:13,650 --> 00:05:17,220 We can change the thickness of our border to maybe something like that. 74 00:05:18,120 --> 00:05:23,250 Now we have a thick border and of course, we can also change the mode of our border. 75 00:05:23,520 --> 00:05:29,610 So maybe I want it to be in the middle of our outline here, the defined edges, or you can have it 76 00:05:29,610 --> 00:05:31,080 be on the inside. 77 00:05:31,080 --> 00:05:35,760 So when I increase the size instead of expanding outwards, it expands inwards. 78 00:05:35,850 --> 00:05:40,080 If I set it to like 15, it expands inwards. 79 00:05:40,320 --> 00:05:41,730 So that's a little cool. 80 00:05:42,580 --> 00:05:49,660 The next one here is called Layout Order, and this is for sorting the order of a joy when you use something 81 00:05:49,660 --> 00:05:54,670 called a I think it's called like UI grid style layout or something like that. 82 00:05:54,670 --> 00:05:56,470 So I wouldn't worry about this for now. 83 00:05:56,710 --> 00:06:00,700 So position holds a property called a udim. 84 00:06:01,580 --> 00:06:02,780 And there's two numbers in here. 85 00:06:02,780 --> 00:06:09,230 You can either store the scale or the offset scale is the best one, in my opinion, because it allows 86 00:06:09,230 --> 00:06:14,770 the position of our object to be in the same place no matter the size of a person's screen. 87 00:06:14,780 --> 00:06:16,580 So right now I'm using scale. 88 00:06:16,580 --> 00:06:21,860 That means the anchor point, which is at the center of this object, will always be in the middle of 89 00:06:21,860 --> 00:06:25,940 our screen in the x direction and and in the Y direction. 90 00:06:25,940 --> 00:06:33,080 So even if I resize my screen here, my anchor point is always staying in the middle of my screen the 91 00:06:33,080 --> 00:06:34,160 entire time. 92 00:06:34,730 --> 00:06:37,310 What if I used offset instead? 93 00:06:37,400 --> 00:06:39,920 And this measures in pixels, by the way. 94 00:06:41,090 --> 00:06:46,850 Right now I have it set in a defined 500 pixels and the x direction and 100 in the Y direction. 95 00:06:46,850 --> 00:06:50,360 And even if I rescale my screen, you see, it doesn't move. 96 00:06:50,390 --> 00:06:58,280 It will always stay at that 500 to 100 pixel position and it will even get cut off the screen. 97 00:06:58,970 --> 00:07:00,690 If I resize my screen like this. 98 00:07:00,710 --> 00:07:02,900 You see, it doesn't scale with the screen at all. 99 00:07:03,660 --> 00:07:05,090 The next one is rotation. 100 00:07:05,100 --> 00:07:06,090 Very easy. 101 00:07:06,360 --> 00:07:09,240 Just rotates our UI element in the clockwise direction. 102 00:07:09,240 --> 00:07:13,950 So like 15 degrees, 40 degrees, 50 degrees, blah blah blah. 103 00:07:14,430 --> 00:07:15,540 Size. 104 00:07:15,540 --> 00:07:19,350 Similar idea to position holds a scale in an offset. 105 00:07:19,500 --> 00:07:24,990 So right now the size of my screen UI is at a set 200 pixels and 50 pixels. 106 00:07:24,990 --> 00:07:33,360 Or I can change it to be like 0.2 in the x direction and point three in the Y. 107 00:07:33,420 --> 00:07:34,470 Maybe that's a little bit too much. 108 00:07:34,470 --> 00:07:36,210 0.1 in the Y direction. 109 00:07:37,230 --> 00:07:44,370 And now, as I scale my screen down, you can see that it continues to scale along with my screen. 110 00:07:44,580 --> 00:07:46,170 So that one's pretty cool. 111 00:07:47,520 --> 00:07:52,700 Size constraint is basically telling the game how you want your UI elements to scale. 112 00:07:52,710 --> 00:08:00,000 So if I set it to relative x x, that means if I resize my screen it will only scale my object in the 113 00:08:00,000 --> 00:08:00,630 x direction. 114 00:08:00,630 --> 00:08:06,420 So as you can see, when I rescale my screen like this, my object is staying the same size in the y 115 00:08:06,420 --> 00:08:07,170 direction. 116 00:08:07,170 --> 00:08:11,340 But if I rescale it this way, you see that the size shifts. 117 00:08:12,260 --> 00:08:14,180 Or I can do it for the Y direction. 118 00:08:14,180 --> 00:08:17,750 So if I rescale it this way, the game doesn't care. 119 00:08:17,750 --> 00:08:20,960 But if I do it this way, then the game does care. 120 00:08:21,290 --> 00:08:25,280 Visible determines whether or not you want the UI element to be visible. 121 00:08:25,670 --> 00:08:28,670 And then of course Z index set the rendering priority. 122 00:08:28,670 --> 00:08:34,490 If you have multiple children, like multiple text labels, show which one will be on top of the other 123 00:08:34,730 --> 00:08:35,780 clip descendants. 124 00:08:35,780 --> 00:08:42,050 This is basically if you have any children that are part of your text label, any descendants, if they 125 00:08:42,050 --> 00:08:47,690 go beyond the border of the text label, then they will get cut off if this is set to true. 126 00:08:48,280 --> 00:08:52,300 So, for example, if I put, like, I don't know, like a frame in here. 127 00:08:53,100 --> 00:08:53,490 Right now. 128 00:08:53,490 --> 00:08:55,230 You see it's going over the border. 129 00:08:55,230 --> 00:08:58,620 But if I set clip descendants to true see, it gets cut off. 130 00:08:59,720 --> 00:09:01,610 Localization and selection. 131 00:09:01,610 --> 00:09:06,140 We're not going to worry about these because selection is basically for controllers, so don't worry 132 00:09:06,140 --> 00:09:06,740 about it. 133 00:09:07,130 --> 00:09:13,250 And then here's all your standard text stuff like changing the font of the text, changing whether or 134 00:09:13,250 --> 00:09:18,130 not you like to be bold, italic, whatever, very simple stuff. 135 00:09:18,140 --> 00:09:20,150 We're not going to go too in depth with this. 136 00:09:20,960 --> 00:09:26,390 So the next guy I want to talk about here are Surface UI's, and these are pretty similar to screen 137 00:09:26,390 --> 00:09:30,170 guys, but you set them to be on top of parts. 138 00:09:30,740 --> 00:09:35,090 So with my yellow part here, I can put a surface guy. 139 00:09:36,310 --> 00:09:40,060 And to find a face to put it on, I'll put it on the top. 140 00:09:41,090 --> 00:09:43,250 And I'll add another text label in here. 141 00:09:44,240 --> 00:09:48,590 And as you can see, my GI is now on this part. 142 00:09:48,890 --> 00:09:51,820 And there's also some other properties in here like Z offset. 143 00:09:51,830 --> 00:09:59,120 If you have multiple surface GI on the same face, we can enable or disable the UI. 144 00:10:00,230 --> 00:10:03,200 We have another property here called Tool Punch through. 145 00:10:04,030 --> 00:10:10,750 And this is a property for like when a player is holding a tool, how close they have to be to interact 146 00:10:10,750 --> 00:10:12,760 with elements on the surface UI. 147 00:10:12,790 --> 00:10:19,540 So if I put like a, like a text button in here, if I set this to ten, that means any players who 148 00:10:19,540 --> 00:10:24,180 are holding a tool have to be ten studs or closer in order to click the button. 149 00:10:24,190 --> 00:10:28,720 Otherwise, if they're greater than ten studs away and they try to click the button, their tool is 150 00:10:28,720 --> 00:10:33,430 going to be used instead of actually pressing the button like it's going to completely ignore it. 151 00:10:33,700 --> 00:10:39,100 And some other extra settings we get in here are pixels per stud, which changes the resolution. 152 00:10:39,580 --> 00:10:42,610 So maybe I want it to be high resolution. 153 00:10:42,610 --> 00:10:47,260 I can set there to be 200 pixels in a stud and as you can see, it shrinks. 154 00:10:47,530 --> 00:10:52,330 So right now our text label is set in the offset mode for its size instead of scale. 155 00:10:52,720 --> 00:10:56,600 So I can actually change the size here to be scale with this neat little plug in. 156 00:10:56,620 --> 00:10:59,770 It's called auto scale light, if you want to get it. 157 00:11:01,640 --> 00:11:02,570 But anyways. 158 00:11:02,570 --> 00:11:02,780 Yeah. 159 00:11:02,780 --> 00:11:06,260 This just increases the resolution of our surface UI. 160 00:11:07,320 --> 00:11:08,580 I can put some text in here. 161 00:11:08,580 --> 00:11:09,990 I can scale the text. 162 00:11:10,020 --> 00:11:11,130 Make it bigger. 163 00:11:11,280 --> 00:11:12,570 Put in whatever I'd like. 164 00:11:12,570 --> 00:11:14,820 Like below there. 165 00:11:15,120 --> 00:11:16,410 So, yeah, pretty cool. 166 00:11:16,440 --> 00:11:20,730 They basically just allow you to put custom text on parts that people can see. 167 00:11:20,940 --> 00:11:27,140 And since my size is in scale mode, if I change the size of my part, it scales along with it. 168 00:11:27,150 --> 00:11:28,740 So that's very nice. 169 00:11:29,400 --> 00:11:30,650 What else are we going to talk about? 170 00:11:30,660 --> 00:11:32,760 Let's talk about Billboard, guys. 171 00:11:33,060 --> 00:11:39,420 A billboard UI is basically a floating 2D guy that will act like this object in your game that will 172 00:11:39,420 --> 00:11:41,250 rotate around and follow your camera. 173 00:11:41,250 --> 00:11:44,580 It's basically like a particle from a particle emitter. 174 00:11:44,580 --> 00:11:50,670 So I can put a billboard guy in here in my part and I can add another text label. 175 00:11:51,510 --> 00:11:52,380 And there you go. 176 00:11:52,380 --> 00:11:55,470 You can kind of see it, but it's basically like floating around there. 177 00:11:55,950 --> 00:12:01,920 Another cool thing with Billboard guys that I can put them in attachments and then I can move my attachment. 178 00:12:02,130 --> 00:12:03,540 And there you go. 179 00:12:03,600 --> 00:12:09,390 There's my billboard guy and it follows my camera around and there's some extra settings in here we 180 00:12:09,390 --> 00:12:10,470 can take a look at. 181 00:12:11,100 --> 00:12:16,260 This one is called Always on Top, and it tells the game whether or not you like this billboard guy 182 00:12:16,290 --> 00:12:17,940 to render on top of everything. 183 00:12:17,940 --> 00:12:24,030 So if I turn this on, that means if I were to have this part here and move it in front of it. 184 00:12:24,910 --> 00:12:27,520 I still see the guy become rendered. 185 00:12:27,520 --> 00:12:30,550 But if I turn it off, then I don't see it anymore. 186 00:12:31,060 --> 00:12:37,660 This one here light influence basically changes how again, light influences with our billboard UI. 187 00:12:37,690 --> 00:12:39,900 Just like how we saw with particle emitters. 188 00:12:39,930 --> 00:12:46,410 So if I set it to zero, the shadow that is being casted for my object has no effect on my UI. 189 00:12:46,420 --> 00:12:50,770 But if I turn it back on, you can see that my shadow is actually interacting with my. 190 00:12:51,700 --> 00:12:52,240 Here. 191 00:12:53,330 --> 00:12:54,430 Max distance. 192 00:12:54,440 --> 00:12:55,610 This one is pretty simple. 193 00:12:55,670 --> 00:13:00,410 Right now it's set to basically infinity, but this just sets how far away you can see the guy. 194 00:13:00,440 --> 00:13:01,730 So I could set it to like 100. 195 00:13:02,780 --> 00:13:06,920 And if I get greater than 100 studs away, it disappears. 196 00:13:07,280 --> 00:13:14,450 Player to hide from This is a property used by scripts to hide the billboard UI from a specific player 197 00:13:14,960 --> 00:13:16,390 reset on spawn. 198 00:13:16,400 --> 00:13:23,000 Same general idea whether or not you want this billboard GI to be reset when a player responds, the 199 00:13:23,000 --> 00:13:29,120 size is actually a little bit different for a billboard guy because the scale actually represents how 200 00:13:29,120 --> 00:13:32,030 large the guy will be in studs. 201 00:13:32,300 --> 00:13:35,780 So if I actually change it here to scale. 202 00:13:37,100 --> 00:13:39,290 Right now it's set to something pretty small. 203 00:13:39,290 --> 00:13:44,120 But if I set it to 50, that means I want it to be 50 studs in the X direction. 204 00:13:44,120 --> 00:13:47,330 And then maybe we could do like 20 studs in the Y direction. 205 00:13:47,960 --> 00:13:49,190 That's actually a little bit too big. 206 00:13:49,190 --> 00:13:53,900 So let's just do three and then four. 207 00:13:54,650 --> 00:13:55,820 How about six? 208 00:13:55,970 --> 00:13:57,330 No, how about ten? 209 00:13:57,410 --> 00:13:58,670 Okay, good enough. 210 00:14:00,660 --> 00:14:04,680 Oh, we're going to have to also set the size in here to be scale as well. 211 00:14:04,680 --> 00:14:07,680 That's why it wasn't rendering properly. 212 00:14:12,020 --> 00:14:19,520 But basically the difference between scale and offset in here for the size of our billboard UI is that 213 00:14:19,520 --> 00:14:23,030 offset defines a set amount of pixels on your screen. 214 00:14:23,030 --> 00:14:24,470 This guy will take up. 215 00:14:24,560 --> 00:14:30,770 So if I set it to like 100, no matter how far away I get from my guy, it will always take up 100 pixels 216 00:14:30,770 --> 00:14:31,760 on my screen. 217 00:14:32,360 --> 00:14:38,180 While scale means that this object in our game will take up three studs. 218 00:14:38,180 --> 00:14:44,870 So as I continue to get farther and farther away from my guy here, when we set this to infinity again. 219 00:14:49,670 --> 00:14:52,340 If I continue to get farther and farther away. 220 00:14:52,340 --> 00:14:57,650 It is not changing the size of our billboard GI to stain at that ten studs width and the three studs 221 00:14:57,650 --> 00:14:58,160 height. 222 00:15:00,160 --> 00:15:08,080 But if I were to use offset instead, maybe I want it to be 100 pixels in the x direction and then maybe 223 00:15:08,080 --> 00:15:11,650 40 in the Y direction now as I move away. 224 00:15:12,570 --> 00:15:18,300 You see, it is always taken up 100 pixels on my screen in the x direction, and it's always taken up 225 00:15:18,300 --> 00:15:20,280 40 pixels in the Y direction. 226 00:15:21,080 --> 00:15:24,320 So that's the difference with size on billboards, you guys. 227 00:15:25,570 --> 00:15:30,340 And I think that basically wraps up all the basics with DUIs and robots.